//电梯组件

import styled from "@emotion/styled"
import { StyleProps } from "../type/style";
import ElevatorLeftDoor from "./ElevatorLeftDoor"
import ElevatorRightDoor from "./ElevatorRightDoor"

const StyleElevator = styled.div`
    height: 98px;
    background: url("https://logocdn.feigua.cn/BloggLogo/d50877f6e0dfaad430c023ba014a6779.jpg-jpg") center / cover no-repeat;
    border: 1px solid var(--elevatorBorderColor--);
    width: calc(100% - 2px);
    padding: 1px;
    transition-timing-function: ease-in-out;
    position: absolute;
    left: 1px;
    bottom: 1px;
`

export interface ElevatorProps {
  //可以看作对象取值的形式，取 StyleProps 接口中 style 属性的类型，这里等同于 CSSProperties
  leftDoorStyle: StyleProps['style'];
  rightDoorStyle: StyleProps['style'];
  leftToggle: boolean
  rightToggle: boolean
}

//Partial是一个泛型，传入接口，代表将接口的每个属性变成可选属性
const Elevator = (props: Partial<ElevatorProps>) => {
  //解析出ElevatorProps的两个属性值：leftDoorStyle和rightDoorStyle
  const { style,leftDoorStyle, rightDoorStyle, leftToggle, rightToggle } = props;
  return (
    <StyleElevator style={style}>
      <ElevatorLeftDoor style={leftDoorStyle} toggle={leftToggle} />
      <ElevatorRightDoor style={rightDoorStyle} toggle={rightToggle} />
    </StyleElevator>
  )
}

export default Elevator